<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Chatroom</title>

    <style>
      #nickname {
        display: none;
      }

      #messages {
        height: 300px;

        overflow-y: scroll;

        margin-bottom: 10px;
      }

      ul {
        list-style: none;

        padding: 0;

        margin: 0;
      }

      li {
        margin-top: 10px;
      }

      img {
        width: 30px;

        height: 30px;

        vertical-align: middle;

        margin-right: 10px;
      }
    </style>
  </head>

  <body>
    <div id="loginPanel">
      <p>输入一个昵称:</p>

      <input type="text" id="nicknameInput" />

      <button id="submit">进入聊天室</button>
    </div>

    <div id="chatroom" style="display: none">
      <div id="nickWrapper">
        <img id="avatarImg" src="" />

        <span id="nickname"></span>

        <button id="logout">退出聊天室</button>
      </div>

      <div id="messages"></div>

      <input type="text" id="messageInput" placeholder="请输入聊天信息" />

      <button id="sendBtn">发送</button>
    </div>

    <script src="./socket.io/socket.io.js"></script>
    <script src="./chat.js"></script>
  </body>
</html>
